<template>
	<view class="container">
		<!-- 全屏音频背景图片 -->
		<image class="fullscreen-image" :src="currentAudio.img" mode="aspectFill">
		</image>
		<!-- 上一首按钮-->
		<image src="/static/image/icons/last_music.png" class="control-button last-music" @click="changeMusic(-1)">
		</image>
		<!-- 旋转图标 -->
		<view class="playing-icon">
			<image :src="currentAudio.img" class="rotate-icon" mode="aspectFill" />
		</view>
		<!-- 下一首按钮-->
		<image src="/static/image/icons/next_music.png" class="control-button next-music" @click="changeMusic(1)">
		</image>
		<!-- 音频播放器组件 -->
		<view class="audio-controls">
			<yz-audio ref="audioPlayer">
				<!-- 自定义按钮：若不需要可删除 -->
				<template v-slot:extraCtrls>
					<uni-icons type="heart-filled" size="25" color="#fff">
					</uni-icons>
					<uni-icons type="cloud-download-filled" size="25" color="#fff">
					</uni-icons>
					<uni-icons fontFamily="CustomFont" :size="25" color="#fff" v-html="currentSpeedIcon"
						@click="playAudioByRate">
					</uni-icons>
				</template>
			</yz-audio>
		</view>
	</view>
</template>


<script>
	// 引入自定义的音频播放器组件
	import yzAudio from '../../components/yz-audio/yz-audio.vue';

	// 引入音频数据
	import {
		audioList
	} from "../../commons/mock.js";

	export default {
		components: {
			yzAudio // 注册自定义组件
		},
		data() {
			return {
				audioList, //音频数据
				currentIndex: 0, // 当前播放音频的索引
				isDoubleSpeed: false, // 追踪当前是否处于二倍速播放
				oneSpeedIcon: "&#xe9c8;", //一倍速图标
				twoSpeedIcon: "&#xe9c9;" //二倍速图标
			}
		},
		computed: {
			currentAudio() {
				// 计算属性，返回当前播放的音频对象
				return this.audioList[this.currentIndex];
			},
			currentSpeedIcon() {
				// 根据isIconClick的状态返回当前图标的HTML实体
				return this.isDoubleSpeed ? this.twoSpeedIcon : this.oneSpeedIcon;
			}
		},
		methods: {
			updateAudioPlayer() {
				// 更新音频播放器的内容，包括音频源、封面、歌手和名称
				const currentAudio = this.currentAudio;
				this.$refs.audioPlayer.setSrc(currentAudio.src);
				this.$refs.audioPlayer.setPoster(currentAudio.img);
				this.$refs.audioPlayer.setSinger(currentAudio.author);
				this.$refs.audioPlayer.setName(currentAudio.name);
			},
			// 翻页播放
			changeMusic(direction) {
				// 根据方向参数切换歌曲，direction为-1表示上一首，1表示下一首 
				this.currentIndex = (this.currentIndex + direction +
						this.audioList.length) %
					this.audioList.length;
				this.updateAudioPlayer();
			},
			// 倍速播放
			playAudioByRate() {
				// 切换图标状态
				this.isDoubleSpeed = !this.isDoubleSpeed;
				// 设置音频播放速度
				this.$refs.audioPlayer.playbackRate(
					this.isDoubleSpeed ? 2 : 1
				);
			}
		},
		mounted() {
			//组件挂载后。初始化音频播放器
			this.updateAudioPlayer();
		},
		onLoad(options) {
			// 检查 options.audioList 是否存在且为字符串
			if (options && typeof options.audioList === 'string') {
				// 获取上一个页面传递过来的音乐列表数据
				const audioListStr = options.audioList;
				// 赋值给当前页的音乐列表
				this.audioList = JSON.parse(decodeURIComponent(audioListStr));
			}
		}
	};
</script>


<style lang="scss">
	.container {
		width: 100%;
		height: 100vh; //全屏高度

		.fullscreen-image {
			width: 100%;
			height: 100%;
			//确保替换元素的内容缩放并保持宽高比，以完全覆盖其框
			object-fit: cover;
			filter: blur(8px); // 模糊效果
		}

		// 翻页播放按钮
		.control-button {
			position: absolute; //绝对定位
			top: 45%;
			width: 80rpx;
			height: 80rpx;

			&.last-music {
				left: 10%; // 上一首按钮位置
			}

			&.next-music {
				right: 10%; // 下一首按钮位置
			}
		}

		// 旋转图标定位
		.playing-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 1;

			.rotate-icon {
				width: 200px;
				height: 200px;
				border-radius: 50%; // 圆形
				animation: spin 8s linear infinite; // 使用旋转
			}
		}

		// 旋转动画
		@keyframes spin {
			from {
				transform: rotate(0deg); // 旋转开始角度
			}

			to {
				transform: rotate(360deg); // 旋转结束角度
			}
		}

		// 播放器
		.audio-controls {
			position: absolute;
			bottom: 10px;
			left: 10px;
			right: 10px; // 音频控制区域位置
		}
	}

	// 引入字体图标
	@font-face {
		font-family: CustomFont;
		src: url('/static/iconfont.ttf');
	}
</style>